<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="区域" required>
          <el-input v-model="area" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="所属地点" required>
          <el-input v-model="place" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="部门" required>
          <el-input v-model="dept" size="mini"></el-input>
        </el-form-item>
        <p>采购明细</p>
        <el-form-item label="物品名称" required>
          <el-input v-model="pname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="型号/规格" required>
          <el-input v-model="specification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数量" required>
          <el-input v-model="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="单价" required>
          <el-input v-model="price" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="总价" required>
          <el-input v-model="totalprice" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="采购链接" required>
          <el-input v-model="link" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="other" size="mini"></el-input>
        </el-form-item>
        <el-form-item id="bhreason" style="display: none" label="驳回原因" required>
          <el-input v-model="reason" size="mini"></el-input>
        </el-form-item>


        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <p style="font-size:16px;font-weight: 900">审批人</p>

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-if="fourShow">
              <h3>四级审批</h3>
              <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <!--<van-step v-show="oneShow">
              <p style="font-size:16px;font-weight: 900">上级领导</p>
              <van-image v-for="(item) in oneLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>-->

            <van-step v-show="zdShow">
              <p style="font-size:16px;font-weight: 900">人事行政</p>
              <van-image v-for="item in twoLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-show="zdrzShow">
              <p style="font-size:16px;font-weight: 900">人事经理</p>
              <van-image v-for="item in threeLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

<!--            <van-step v-show="fourShow">
              <p style="font-size:16px;font-weight: 900">副经理</p>
              <van-image v-for="item in fourLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>-->

          </van-steps>
        </div>

        <van-dialog v-model="show" show-cancel-button :before-close="chargeBtn">
          <!-- 输入框 -->
          <el-form-item label="驳回原因" required>
            <el-input v-model="reason" size="mini"></el-input>
          </el-form-item>
        </van-dialog>

        <el-form-item>
          <el-button id="isAgree" v-show="showtg" v-bind:disabled="isShow" type="primary" size="mini" @click="submitAgree">{{message}}</el-button>
          <el-button id="isNotAgree" v-show="showbh" v-bind:disabled="isShow" type="warning" size="mini" @click="submitNotAgree">{{message1}}</el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup,Dialog} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
  Vue.use(Dialog)
export default {

  data() {
    return {
      id:"",
      area:"",
      place:"",
      dept:"",
      pname:"",
      specification:"",
      number:"",
      price:0,
      totalprice:0,
      link:"",
      other:"",

      reason:"",
      applicant:"",

      nowUser:"",
      title: "物品采购审批",

      isShow:false,
      message:"通过",
      message1:"驳回",
      show:false,

      showtg:true,
      showbh:true,

      active:"-1",//步骤索引,从0开始
      oneShow:false,
      twoShow:false,
      threeShow:false,
      fourShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],
      fourspusers:[],

      zdShow:true,
      twoLd:[],
      zdrzShow:true,
      threeLd:[],
    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.id= this.$route.params.id;
    //this.getLd();
    this.getScrapInfo();
  },
  methods: {
    //查找对应用户的上级领导进行审批
    getLd(){
      this.$https.post('/mobiles/getProcureSp',{
        nowUser:this.applicant,
      }).then((res)=>{

        if (res.data.data.onespusers && res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.data.twospusers && res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.data.threespusers && res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }
        if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourspusers=res.data.data.fourspusers;
        }else{
          this.fourShow=false;
          this.fourspusers=[];
        }

        /*if (res.data.data.ld1.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.ld1;
        }*/

        if (res.data.data.ld2.length>0){
          this.zdShow=true;
          this.twoLd=res.data.data.ld2;
        }
        if (res.data.data.ld3.length>0){
          this.zdrzShow=true;
          this.threeLd=res.data.data.ld3;
        }
        /*if (res.data.data.ld4.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.ld4;
        }*/
      }).catch(err => {
        console.log(err);
      })
    },
    //根据入职管理的id找到相对应的入职管理详情
    getScrapInfo(){
      this.$https.post('/mobiles/getProcureInfo',{
        nowUser:this.nowUser,
        id:this.id,

      }).then((res)=>{
        this.applicant=res.data.data.applicant;
        this.getLd();

        this.active=res.data.data.agree-1;

        this.area=res.data.data.area;
        this.place=res.data.data.place;
        this.dept=res.data.data.dept;
        this.pname=res.data.data.pname;
        this.specification=res.data.data.specification;
        this.number=res.data.data.number;
        this.price=res.data.data.price;
        this.totalprice=res.data.data.totalprice;
        this.link=res.data.data.link;
        this.other=res.data.data.other;
        if (res.data.data.result=='已通过'){
          this.isShow=true;
          this.message="已通过";
          this.showbh=false;
        }else if (res.data.data.result=='已驳回'){
          this.isShow=true;
          this.message1="已驳回";
          this.showtg=false;
          document.getElementById("bhreason").style.display= "";
          this.reason=res.data.data.reason;
        }else {
          if (res.data.data.showAgree=='0'){
            this.isShow=true;
            this.message="已审核";
            this.showbh=false;
          }
        }
      }).catch(err => {
        console.log(err);
      })
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },

    // 提交同意
    submitAgree() {
      this.show=false;
      this.isShow=true;
      this.$https.post('/mobiles/isAgreeProcure', {
        nowUser:this.nowUser,
        id:this.id,
      }).then(res => {
        res;
        Toast("已通过");
        this.getScrapInfo();//找到对应的页面详情，及领导信息
      }).catch(err => {
        console.log(err)
      });
    },
    //驳回
    submitNotAgree() {
      this.show=true;
    },
    chargeBtn(action,done){
      if (action==='cancel'){
        done();
      }else if (action==='confirm'){
        this.show=false;
        this.$https.post('/mobiles/isAgreeProcure', {
          nowUser:this.nowUser,
          id:this.id,
          reason:this.reason,
        }).then(res => {
          res;
          Toast("已驳回");
          this.getScrapInfo();//找到对应的页面详情，及领导信息
        }).catch(err => {
          console.log(err)
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>